<template>
  <div class="recommend">
    <ul class="list">
      <li v-for="(item, index) in recommend" :key="index">
        <div class="li-top">
          <img :src="item.imgsrc" alt="" />
          <div class="top-name">
            <p>{{ item.name }}</p>
            <div v-if="item.devices">{{ item.devices }}</div>
          </div>
          <div class="top-bg"></div>
        </div>
        <div class="li-box">
          <p class="box-title">{{ item.title }}</p>
          <p class="box-content">
            {{ item.content }}<span>{{ item.ckqw }}</span>
          </p>
          <img :src="item.imgsrcs" alt="" />
        </div>
        <div class="li-boxs">
          <div><img :src="item.imgsrcss" alt="" />{{ item.tags }}</div>
          <div><img :src="item.imgsrcsss" alt="" />{{ item.tagss }}</div>
        </div>
        <div class="li-boxss">
          <p>
            <span>{{ item.names }}</span
            >{{ item.contents }}
          </p>
        </div>
        <div class="li-bottom">
          <div class="bottom-bg"></div>
          <div class="bottom-bgs"><span></span>{{ item.num }}</div>
          <div class="bottom-bgss"><span></span>{{ item.nums }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import instance from "../../../api/request";
export default {
  name: "Recommend",
  data() {
    return {
      recommend: [],
    };
  },
  methods: {
    async fn() {
      let { data } = await instance.get("/index.json");
      let micircle = data.micircle;
      this.recommend = micircle.recommend;
      console.log(this.recommend);
    },
  },
  created() {
    this.fn();
  },
};
</script>
<style scoped lang="less">
.recommend {
  width: 7.2rem;
  margin: 0 auto;
  padding-top: 0.78rem;
  .list {
    li {
      margin-left: 0.24rem;
      margin-right: 0.24rem;
      padding-top: 0.3rem;
      text-align: left;
      .li-top {
        margin-bottom: 0.2rem;
        display: flex;
        align-items: center;
        img {
          margin-right: 0.16rem;
          width: 0.52rem;
          height: 0.52rem;
          border-radius: 0.52rem;
          overflow: hidden;
        }
        .top-name {
          flex: 1;
          p {
            font-size: 0.24rem;
            font-weight: 500;
            color: #161616;
            line-height: 1.4;
          }
          div {
            padding-left: 0.2rem;
            position: relative;
            font-size: 0.2rem;
            font-weight: 500;
            color: #757575;
            &::after {
              content: "";
              width: 0.13rem;
              height: 0.21rem;
              background: url()
                50% no-repeat;
              background-size: 100% 100%;
              position: absolute;
              left: 0;
              top: 8%;
            }
          }
        }
        .top-bg {
          margin-left: 0.1rem;
          width: 0.4rem;
          height: 0.4rem;
          background: url()
            50% no-repeat;
          background-size: 100% 100%;
        }
      }
      .li-box {
        margin-bottom: 0.27rem;
        .box-list {
          font-size: 0.3rem;
          font-weight: 500;
          color: #161616;
          line-height: 1.6;
          word-wrap: break-word;
          overflow: hidden;
          text-overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .box-content {
          margin-top: 0.16rem;
          font-size: 0.26rem;
          color: #666;
          line-height: 0.43rem;
          word-wrap: break-word;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          span {
            color: #ff5528;
          }
        }
        img {
          margin-top: 0.2rem;
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 0.3rem;
        }
      }
      .li-boxs {
        max-height: 1.2rem;
        overflow: hidden;
        display: flex;
        div {
          display: flex;
          align-items: center;
          padding: 0.09rem;
          margin-right: 0.14rem;
          max-width: 6.6rem;
          margin-bottom: 0.18rem;
          line-height: 0.24rem;
          background: #f6f6f6;
          border-radius: 0.06rem;
          font-size: 0.24rem;
          font-weight: 500;
          color: #757575;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          img {
            width: auto;
            height: 0.24rem;
            margin-right: 0.07rem;
          }
        }
      }
      .li-boxss {
        padding: 0.16rem;
        margin-bottom: 0.14rem;
        background: #f6f6f6;
        border-radius: 0.1rem;
        p {
          font-size: 0.26rem;
          font-weight: 400;
          color: #161616;
          line-height: 1.34;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          span {
            color: #757575;
          }
        }
      }
      .li-bottom {
        padding-bottom: 0.2rem;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .bottom-bg {
          width: 0.4rem;
          height: 0.4rem;
          background: url(https://m.mi.com/static/img/m_b_share.ac01313399.png)
            no-repeat;
          background-size: contain;
        }
        .bottom-bgs {
          width: 1rem;
          font-size: 0.24rem;
          font-weight: 500;
          color: #757575;
          display: flex;
          span {
            display: block;
            width: 0.4rem;
            height: 0.4rem;
            background: url(https://m.mi.com/static/img/m_b_msg.1f9f89973f.png)
              no-repeat;
            background-size: contain;
          }
        }
        .bottom-bgss {
          width: 1rem;
          font-size: 0.24rem;
          font-weight: 500;
          color: #757575;
          display: flex;
          span {
            display: block;
            width: 0.4rem;
            height: 0.4rem;
            background: url(https://m.mi.com/static/img/m_b_praise_a.b483bc60a9.png)
              no-repeat;
            background-size: contain;
          }
        }
      }
    }
  }
}
</style>